<div th:replace="~{ app :: layout ('用户注册', _, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
  <div id="main" class="container my-2rem">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="card">
          <div class="card-header">注册</div>

          <div class="card-body">
            <p class="text-center text-muted font-size-12"><span class="text-primary">已有账号？</span>直接登录</p>
            <p class="text-center">
              <a class="btn btn-outline-primary" href="#" th:href="@{/login}" role="button">
                <i class="bi bi-fingerprint me-1"></i>
                Login
              </a>
            </p>
            <p class="mt-3 text-center text-muted font-size-12">或快速注册一个新账号</p>
            <form method="POST" action="#" th:action="@{/user/register}" th:object="${user}">
              <div class="row mb-3 justify-content-center">
                <div class="col-lg-6">
                  <input placeholder="邮箱" th:field="*{email}" id="email" type="email" class="form-control" th:class="|form-control ${#fields.hasErrors('email') ? 'is-invalid' : ''}|" name="email" required autofocus oninput="fillUsernameFromEmail()">
                  <span th:if="${#fields.hasErrors('email')}" class="invalid-feedback" role="alert"><strong th:errors = "*{email}"></strong></span>
                </div>
              </div>

              <div class="row mb-3 justify-content-center">
                <div class="col-lg-6">
                  <input placeholder="用户名" th:field="*{name}" id="name" type="text" class="form-control" th:class="|form-control ${#fields.hasErrors('name') ? 'is-invalid' : ''}|" name="name" required>
                  <span th:if="${#fields.hasErrors('name')}" class="invalid-feedback" role="alert"><strong th:errors = "*{name}"></strong></span>
                </div>
              </div>

              <div class="row mb-3 justify-content-center">
                <div class="col-lg-6">
                  <input placeholder="密码" th:field="*{password}" id="password" type="password" class="form-control" th:class="|form-control ${#fields.hasErrors('password') ? 'is-invalid' : ''}|" name="password" required autocomplete="password">
                  <span th:if="${#fields.hasErrors('password')}" class="invalid-feedback" role="alert"><strong th:errors = "*{password}"></strong></span>
                </div>
              </div>

              <div class="row mb-0">
                <div class="col-lg-6 offset-lg-3">
                  <button type="submit" class="btn btn-primary">
                    注册新账号
                  </button>

                  <a class="btn btn-link font-size-12 text-muted" href="/user/password-reset">
                    忘记密码
                  </a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script id="js">
    function fillUsernameFromEmail(){
      let emailInput = document.getElementById('email');
      let nameInput = document.getElementById('name');

      let emailValue = emailInput.value;
      let usesrname = emailValue.split("@")[0];
      nameInput.value = usesrname;
    }
  </script>
</div>